<template>
  <view>

  </view>
</template>

<script setup>
import {ref, onMounted} from 'vue'
import {onShow, onLoad} from '@dcloudio/uni-app';

const emit = defineEmits(['getCode'])

const barcode = ref(null)
const flash = ref(false)
const tip = ref('将二维码放入框中，即可自动扫描')


onShow(async () => {
  if (barcode.value) {
    console.log('onShow')
    // barcode.value.start()
  }
})

/**
 * 创建二维码
 * @param {Object} currentWebview
 */
const createBarcode = (currentWebview) => {
  if (!barcode.value) {
    barcode.value = plus.barcode.create(
        'barcode',
        [plus.barcode.QR, plus.barcode.CODABAR, plus.barcode.UPCA, plus.barcode.CODE39, plus.barcode.CODE93, plus.barcode.CODE128],
        {
          top: '64px',
          left: '0px',
          height: '290px',
          width: '100%',
          position: 'absolute',
          background: '#808080',
          frameColor: '#fff',
          scanbarColor: '#FFCC33',
          filters: [0, 7, 5, 8, 9, 10]
        });

    barcode.value.onmarked = onmarked
    barcode.value.setFlash(flash.value)
    //此处未演示扫码成功回调的地址设置，实际请参考HTML5Plus API自行处理
    //注意扫码区域需为正方形，否则影响扫码识别率
    currentWebview.append(barcode.value)
  }
  console.log('createBarcode', barcode.value)
  barcode.value.start()
}

/**
 * 创建提示信息
 * @param {Object} currentWebview
 */
const createTipInfoView = (currentWebview) => {
  const content = new plus.nativeObj.View('content', {
        top: '0px',
        left: '0px',
        height: '100%',
        width: '100%'
      },
      [{
        tag: 'font',
        id: 'scanTips',
        text: tip.value,
        textStyles: {
          size: '14px',
          color: '#ffffff',
          whiteSpace: 'normal'
        },
        position: {
          top: '90px',
          left: '10%',
          width: '80%',
          height: 'wrap_content'
        }
      }]);
  currentWebview.append(content);
}

// 创建 开关灯按钮
const createFlashBarView = (currentWebview) => {
  const openImg = crtFlashImg('static/yellow-scanBar.png')
  const closeImg = crtFlashImg('static/scanBar.png')
  const scanBarVew = new plus.nativeObj.View('scanBarVew', {
    top: '30%',
    left: '40%',
    height: '16%',
    width: '20%',
  }, closeImg)

  scanBarVew.interceptTouchEvent(true)
  currentWebview.append(scanBarVew)

  scanBarVew.addEventListener("click", () => {
    flash.value = !flash.value
    if (flash.value) {
      scanBarVew.draw(openImg)
    } else {
      scanBarVew.draw(closeImg)
    }
    if (barcode.value) {
      barcode.value.setFlash(flash.value)
    }
  }, false)
}

const crtFlashImg = (imgsrc) => {
  return [{
    tag: 'img',
    id: 'scanBar',
    src: imgsrc,
    position: {
      width: '28%',
      left: '36%',
      height: '30%'
    }
  }, {
    tag: 'font',
    id: 'font',
    text: '轻触照亮',
    textStyles: {
      size: '12px',
      color: '#ffffff'
    },
    position: {
      width: '80%',
      left: '10%'
    }
  }]
}

// 扫码成功回调
const onmarked = (type, result) => {
  barcode.value.cancel()
  emit('getCode', result)
  setTimeout(() => {
    console.log('onmarked')
    barcode.value.start()
  }, 2000)
}

onMounted(async () => {
  try {
    // plus.navigator.setFullscreen(true); //全屏
    // 创建相机
    let currentWebview = getCurrentPages()[getCurrentPages().length - 1].$getAppWebview();
    createBarcode(currentWebview)
    createFlashBarView(currentWebview)
  } catch (error) {
    console.log(error)
  }
})
</script>

<style scoped lang="scss">

</style>
